<template>
  <div @click="$emit('closeModal',name);" class="m-modal" :class="{'fade-in':showmodel}">
      <div class="modal-dialog" @click.stop>
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" @click="$emit('closeModal',name)" class="close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" >{{title}}</h4>
          </div>
          <div class="modal-body">
            <slot name="body"></slot>
          </div>
          <div class="modal-footer">
            <slot name="footer"></slot>
          </div>
        </div>
      </div>
    </div>
</template>
<script>

export default {
  name: "Modal",
  props: {
    title: String,
    name: String,
    showmodel: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
   
  }
};
</script>
<style scoped>
.m-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.fade-in {
  display: block;
  animation: fade 0.5s;
}
.modal-dialog {
  margin-top: 20px;
}
@keyframes fade {
  0% {
    opacity: 0;
    top: -80px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
</style>

